<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2020/5/29
  Time: 9:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
    <%@include file="/common/header.jsp"%>
</head>
<body>
<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        background: pink;
        border-radius: 3px;
        margin: 15px auto;
    }
    .menu-icon{
        transition: all .3s;
    }
    .rotate-icon{
        transform: rotate(-90deg);
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;

    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
    span{
        color: white;
    }
    .ivu-layout-sider span{
        font-size: 16px;
    }
    .ivu-menu-item{
        color: white;
        /*background-color: #515A6E;*/
        background-color: pink;
    }
    .ivu-menu-submenu{
        color: white;
        /*background-color: #515A6E;*/
        background-color: pink;
    }
    /*.ivu-menu-item a{*/
        /*color: white;*/
    /*}*/
    /*.ivu-menu-submenu a{*/
        /*color: white;*/
    /*}*/


    .ivu-menu-item{
        /*background-color: #1F2D3D;*/
        /*background-color: #515A6a;*/
        background-color: pink;
    }



    .ivu-tooltip-rel{
        /*background-color: #515A6E;*/
        background-color: pink;
    }
    .ivu-tooltip{
        width: 78px;
    }

    .ivu-layout-sider-children{
        padding-top: 50px;
        background-color: pink;
    }
    .ivu-layout-sider-children ul{
        background-color: pink;
    }

</style>
<div id="root">
<template>
    <div class="layout">
        <Layout>
            <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed" :style="{backgroundColor: 'pink'}">
                <i-Menu
                        active-name="home"
                        :open-names="['home']"
                        <%--:theme="menuTheme"--%>
                        width="auto"
                        :class="menuitemClasses"
                        accordion
                        <%--:style="{background:'#515A6E'}"--%>
                >
                    <a href="/home" target="main" style="background-color: pink;margin:5px 25px ;padding: 0px;display: block"><Icon type="ios-home" ></Icon> <span style="margin-left: 5px">主页</span></a>

                    <template v-for="(item, componentIndex) in menu">
                        <!-- 展开并且有子菜单 -->
                        <Submenu v-if="!isCollapsed && item.children.length" v-bind:key="componentIndex" :name="item.id">
                            <template slot="title">
                                <Icon :type="item.icon" ></Icon>
                                <%--<Icon type="ios-add-circle-outline":style="{color:'#f5f7f9'}"></Icon>--%>
                                <span style="color: white">{{ item.name }}</span>

                            </template>


                            <Menu-Item v-for="(children, index) in item.children" :key="index" :name="children.id" :to="children.to">
                                <a :href="children.url" target="main">
                                    {{ children.name }}
                                </a>
                            </Menu-Item>

                        </Submenu>

                        <!-- 展开但没有子菜单 -->
                        <Menu-Item v-else-if="!isCollapsed" :name="item.id" :to="item.to" v-bind:key="componentIndex">
                            <Icon :type="item.icon" ></Icon>

                            <span ><a :href="item.url" target="main" >{{ item.name }}</a></span>
                        </Menu-Item>

                        <!-- 不展开有子菜单 -->
                        <Dropdown v-else-if="isCollapsed && item.children.length" v-bind:key="componentIndex" placement="right-start" class="menu-dropdown">
                            <Menu-Item :name="item.id" :to="item.to" >
                                <Icon :type="item.icon"></Icon>
                                <span>{{ item.name }}</span>
                            </Menu-Item>
                            <Dropdown-Menu slot="list">
                                <Dropdown-Item v-for="(children, index) in item.children" :key="index" style="padding: 0 0; background-color:#515a6e;">
                                    <Menu-Item :name="children.id" :to="children.to" :style="{background:'white'}">

                                        <a :href="children.url" target="main">
                                                {{ children.name }}

                                        </a>
                                        </Menu-Item>
                                </Dropdown-Item>
                            </Dropdown-Menu>
                        </Dropdown>

                        <!-- 不展开无子菜单 -->
                        <Tooltip v-else-if="isCollapsed" :content="item.name" placement="right" v-bind:key="componentIndex">
                            <MenuItem :name="item.id" :to="item.to">
                                <a :href="item.url" target="main" style="margin-left: 3px;">
                                <Icon :type="item.icon" :style="{margin:'20px 20px'}"></Icon>
                                </a>
                                <span>{{ item.name }}</span>
                            </MenuItem>
                        </Tooltip>
                    </template>
                </i-Menu>
            </Sider>
            <Layout >
                <Header :style="{padding: '10px 0'}" class="layout-header-bar">
                    <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '20px 20px'}" type="md-menu" size="24"></Icon>
                    <Poptip trigger="hover"  content="点击退出" style="float:right;margin-right:80px">
                        <a href="/logout1"><img src="/img/logo-2.png"  height="50" class="img"></a>
                    </Poptip>


                    <span style="float: right;color: black;margin: 10px 5px;font-size: 20px">
                        <span class="date" style="color: black;margin-right: 30px">当前时间：{{date}}</span>
                        欢迎您{{staff.staffName}}

                    </span>

                </Header>
                <Content :style="{margin: '20px', background: '#fff', minHeight: '260px'}">
                    <iframe name="main" width="100%" height="650px" frameborder="0" src="/home"></iframe>
                </Content>
            </Layout>
        </Layout>
    </div>



</template>
</div>
<script>
    var vm = new Vue( {
        el:"#root",
        data: {
                staff:{},
                isCollapsed: false,
                keepAliveList: [],
                title: "Home",
                showSettingPage: false,
                showSuggestionPage: false,
                menu: [

                ],
            date:new Date().toLocaleString('chinese',{hour12:false}),
            nowTimes:{
                yy:0,
                dd:"00",
                hou:"00",
                min:"00",
                sec:"00"
            },
        },
        mounted(){
            this.getlist();
            this.getIndexstaff();
            setInterval(()=>{
                //new Date() new一个data对象，当前日期和时间
                //toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。
                this.date = new Date().toLocaleString('chinese',{hour12:false});
            },1000)
        },
        computed: {
            rotateIcon () {
                return [
                    'menu-icon',
                    this.isCollapsed ? 'rotate-icon' : ''
                ];
            },
            menuitemClasses () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods: {
            collapsedSider () {
                this.$refs.side1.toggleCollapse();
            },
            getlist(){
                axios.get("ii").then(
                    ({data})=>{
                        this.menu=data.result;
                    }
                )
            },
            getIndexstaff(){
                axios.post("/jur/staff/getIndexStaff").then(
                    ({data})=>{
                        this.staff = data;
                    }
                )
            },
        }
    });

</script>
</body>
</html>
